<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="m/head :: head"></div>

    <title>申请发票</title>
</head>

<body class="body-gray">

<!--公用头部-->
<div th:replace="m/head :: body('banner.hidden', 'head-no-menu', '申请发票')"></div>


<!--主体内容-->
<div class="identical-purchase-content invoice-apply-content">
    <form name="receiptForm" th:action="@{'/personal/receipt/apply/' + ${order.id}}" method="post">
        <input type="hidden" id="receiptType" name="type" value="1">
        <input type="hidden" name="title" value="1">
        <input type="hidden" name="unitName">
        <input type="hidden" name="dutyNo">
        <input type="hidden" name="receiveName">
        <input type="hidden" name="contactPhone">
        <input type="hidden" name="postStreet">
        <ul>
            <li>
                <h3>订单:[[${order.no}]]</h3>
            </li>
            <li class="clearfix">
                <div class="left">发票类型</div>
                <div class="right" data-toggle="modal" data-target=".bs-example-modal-fptype" onclick="return false;">
                    <span class="invoice">纸质发票</span>
                    <i class="iconfont icon-youjiantou1"></i>
                </div>
            </li>
            <li class="clearfix">
                <div class="left">发票抬头</div>
                <div class="right" data-toggle="modal" data-target=".bs-example-modal-tt" onclick="return false;">
                    <span class="title">个人</span>
                    <i class="iconfont icon-youjiantou1"></i>
                </div>
            </li>
            <li class="clearfix">
                <div class="left">收票人信息</div>
                <div class="right" data-toggle="modal" data-target=".bs-example-modal-spr" onclick="return false;">
                    <span class="receive-info"></span>
                    <i class="iconfont icon-youjiantou1"></i>
                </div>
            </li>
            <li class="clearfix">
                <div class="left">发票内容</div>
                <div class="right">短视频拍摄</div>
            </li>
            <li class="clearfix">
                <div class="left">发票金额</div>
                <div class="right" th:text="${'￥' + #numbers.formatDecimal(order.totalPrice,1,2) + '元'}"></div>
            </li>
        </ul>
        <p class="tishi">注：发票默认顺丰到付</p>
        <div class="bottom-btn">
            <input type="submit" id="submit-btn" value="提交"/>
            <input type="button" onclick="window.history.back(-1);" value="取消"/>
        </div>
    </form>
</div>


<!--发票类型模态窗-->
<div class="modal fade bs-example-modal bs-example-modal-fptype" tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <ul class="fp-ul">
                <li>
                    <i class="on"></i>
                    <span>纸质发票</span>
                </li>
                <li>
                    <i></i>
                    <span>电子发票</span>
                </li>
            </ul>
            <a href="javascript:void(0)" class="btn" data-toggle="modal" data-target=".bs-example-modal-fptype">确定</a>
        </div>
    </div>
</div>

<!--发票抬头模态窗-->
<div class="modal fade bs-example-modal bs-example-modal-tt" tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <ul class="tt-ul clearfix">
                <li class="on">个人</li>
                <li>公司</li>
            </ul>
            <div class="input" style="display: none;">
                <input type="text" id="unit-name" placeholder="公司名称"/>
                <input type="text" id="duty-no" placeholder="纳税人识别号"/>
            </div>
            <p class="tishi" style="display: none;">
                <i class="iconfont icon-gantanhao"></i>

            </p>
            <a href="javascript:void(0)" class="btn" id="title-btn">确定</a>
        </div>
    </div>
</div>

<!--收票人信息模态窗-->
<div class="modal fade bs-example-modal bs-example-modal-spr" tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="input">
                <input type="text" id="receive-name" placeholder="收票人姓名"/>
                <input type="text" id="contact-phone" placeholder="收票人电话"/>
                <input type="text" id="post-street" placeholder="收票人地址"/>
            </div>
            <p class="tishi" style="display: none;">
                <i class="iconfont icon-gantanhao"></i>

            </p>
            <a href="javascript:void(0)" class="btn" id="info-btn">确定</a>
        </div>
    </div>
</div>

<!--/* 错误提示 */-->
<div class="modal fade bs-example-modal error-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="bottom error-content">

            </div>
        </div>
    </div>
</div>

<div th:replace="m/foot :: foot"></div>

</body>

<div th:replace="m/foot :: footer('baidu.hide')"></div>

<script>
    $(function () {
        // 我的发票类型选择
        $('.bs-example-modal-fptype ul li').click(function () {
            window.receiptForm.receiptType.value = $(this).index() + 1;
            $(this).find('i').addClass('on');
            $(this).siblings().find('i').removeClass('on');
            var text = $(this).find('span').text();
            $('.invoice-apply-content ul li .invoice').text(text);
        });

        $('.bs-example-modal-tt ul li').click(function () {
            if ($(this).index() == 0) {
                $('.bs-example-modal-tt .input').hide();
            } else if ($(this).index() == 1) {
                $('.bs-example-modal-tt .input').show();
            }
            var text = $(this).text();
            $('.invoice-apply-content ul li .title').text(text);
            window.receiptForm.receiptType.value = $(this).index() + 1;
            $(this).addClass('on');
            $(this).siblings().removeClass('on');
            $('.bs-example-modal-tt .tishi').hide();
        })

        $('#title-btn').click(function() {
            if (parseInt(window.receiptForm.receiptType.value) == 2) {
                if ($.trim($('#unit-name').val()).length == 0) {
                    $('.bs-example-modal-tt .tishi').html('<i class="iconfont icon-gantanhao"></i>' + ' 请输入公司名称').show();
                    return false;
                }

                if ($.trim($('#duty-no').val()).length == 0) {
                    $('.bs-example-modal-tt .tishi').html('<i class="iconfont icon-gantanhao"></i>' + ' 请输入税号').show();
                    return false;
                }
                $('.bs-example-modal-tt .tishi').hide();
                window.receiptForm.unitName.value = $('#unit-name').val();
                window.receiptForm.dutyNo.value = $('#duty-no').val();
            }
            $('.bs-example-modal-tt').modal('hide');
        })

        $('#info-btn').click(function () {
            if ($.trim($('#receive-name').val()).length == 0) {
                $('.bs-example-modal-spr .tishi').html('<i class="iconfont icon-gantanhao"></i>' + ' 请输入收票人名称').show();
                return false;
            }
            if ($.trim($('#contact-phone').val()).length == 0) {
                $('.bs-example-modal-spr .tishi').html('<i class="iconfont icon-gantanhao"></i>' + ' 请输入收票人联系方式').show();
                return false;
            }
            if ($.trim($('#post-street').val()).length == 0) {
                $('.bs-example-modal-spr .tishi').html('<i class="iconfont icon-gantanhao"></i>' + ' 请输入邮寄地址').show();
                return false;
            }
            $('.bs-example-modal-spr .tishi').hide();
            window.receiptForm.receiveName.value = $('#receive-name').val();
            window.receiptForm.contactPhone.value = $('#contact-phone').val();
            window.receiptForm.postStreet.value = $('#post-street').val();
            $('.invoice-apply-content ul li .receive-info').text($('#receive-name').val());
            $('.bs-example-modal-spr').modal('hide');
        })

        var error = function(msg) {
            $('.error-modal .error-content').text(msg);
            $('.error-modal').modal();
        }

        $('#submit-btn').click(function () {
            if ($.trim($('input[name="title"]').val()).length == 0) {
                error('请选择发票抬头类型!');
                return false;
            }

            if ($('input[name="type"]').val() == 2) {
                if ($.trim($('input[name="unitName"]').val()).length == 0) {
                    error('请输入公司名称!');
                    return false;
                }

                if ($.trim($('input[name="dutyNo"]').val()).length == 0) {
                    error('请输入纳税人识别号!');
                    return false;
                }
            }

            if ($.trim($('input[name="receiveName"]').val()).length == 0) {
                error('请输入收票人!');
                return false;
            }

            if ($.trim($('input[name="contactPhone"]').val()).length == 0) {
                error('请输入收票人联系方式!');
                return false;
            }

            if ($.trim($('input[name="postStreet"]').val()).length == 0) {
                error('请输入收票人地址!');
                return false;
            }

            window.receiptForm.submit();
        })
    })
</script>

</html>